<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>新用户注册</title>
  <link rel="shortcut icon" href="用户_user.png" type="image/x-icon">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="component/elementUI/index.css">
  <link rel="stylesheet" href="style/wangeditor.css">
  <link rel="stylesheet" href="style/index.css">
  <style>
    .bg{
      background-image: url('背景4.jpg');
    }
     #app{
      margin-top: 50px;
      
    }
    h1,h3{
      text-align: center;
    }
    h3{
      color: cornflowerblue;
    } 
    .zhengge{
      margin:auto;
      width: 800px;
      height: 800px;
    }
    .tpk{
      width: 590px;
      height: 500px;
      float: left;
    }
    .katou{
      background-color: (252, 217, 120, 0.897);
    }
    .card{
      width: 70%;
      height: 78%;
      margin-right: 120px;
      float: right;
      background: rgba(252, 249, 241, 0.877);
      background-image: url('背景.webp');
    }
    .quyu{
      width: 100px;
    }
    .el-tabs__content{
      margin-top: 20px;
      font-size: 16px;
    }
    .zuan{
      margin-left: 130px;
    }
    .yaoqing{
      margin-top: 20px;
      margin-left: -90px;
    }
    .kuang{
      width: 180px;
    }
  </style>
</head>
<body class="bg">
  <div id="app">
    <div class="zhengge">
      <h1>社区营销欢迎你</h1>
      <h3>请登记您的信息</h3>
      <!-- <div class="tpk"><img src="社区.jpg" alt=""></div> -->
      <el-tabs type="border-card" class="card">
        <el-tab-pane label="用户管理" class="katou">
          <div>
            <el-form :label-position="labelPosition" label-width="80px" :model="yhForm">
              <el-form-item label="用户姓名">
                <el-input v-model="yhForm.name" class="input" placeholder="用户姓名"></el-input>
              </el-form-item>
              <el-form-item label="用户电话">
                <el-input v-model="yhForm.pon" class="input" placeholder="用户电话"></el-input>
              </el-form-item>
              <el-form-item label="省/市/区">
                <el-cascader
                   clearable
                  placeholder="省/市/区"
                  :options="options"
                  class="xiangxi"
                  v-model="value"
                  :props="{ value: 'label' }">
                </el-cascader>
              </el-form-item>
                
              <el-form-item label="街道">
                <el-input v-model="yhForm.jd" class="input" placeholder="街道"></el-input>
              </el-form-item>
              <el-form-item label="社区">
                <el-input v-model="yhForm.seq" class="input" placeholder="社区"></el-input>
              </el-form-item>
              <el-form-item label="详细地址" class="zhongn">
             <el-input v-model="yhForm.xx" placeholder="详细地址" class="xiangxi"></el-input>
          </el-form-item>
            <el-form-item label="活动性质">
              <el-radio-group v-model="yhForm.type">
                <el-radio-button label="好友邀请"></el-radio-button>
                <el-radio-button label="地推活动"></el-radio-button>
                <el-radio-button label="商铺扫码"></el-radio-button>
              </el-radio-group>
              <el-form-item label="邀请码" class="yaoqing">&nbsp;&nbsp;
                <el-input v-model="yhForm.yqr" class="kuang" placeholder="请输入邀请人姓名"></el-input>
                <el-input v-model="yhForm.yqm" class="kuang" placeholder="请输入邀请人的邀请码"></el-input>
              </el-form-item>
            </el-form-item>
            <el-form-item size="large">
              <el-button type="primary" @click="onSubmit" class="zuan">立即注册</el-button>
            </el-form-item>
          </el-form>
          </div>
        </el-tab-pane>
        <el-tab-pane label="配置管理">配置管理</el-tab-pane>
      </el-tabs>

    </div>
  </div>
</body>

<script src="https://cdn.jsdelivr.net/npm/@svgdotjs/svg.js@3.0/dist/svg.min.js"></script>
<script type="text/javascript" src="utils/wangeditor.js"></script>
<script type="text/javascript" src="utils/jquery.min.js"></script>
<script type="text/javascript" src="utils/jquery.cookie.js"></script>
<script type="text/javascript" src="utils/vue.min.js"></script>
<script type="text/javascript" src="utils/vuex.min.js"></script>
<script type="text/javascript" src="component/elementUI/index.js"></script>
<script type="text/javascript" src="component/component.js"></script>
<script type="text/javascript" src="config/config.js"></script>
<script type="text/javascript" src="utils/FileSaver.min.js"></script>
<script type="text/javascript" src="utils/FileSaver.js"></script>
<script type="text/javascript" src="utils/xlsx.full.min.js"></script>
<script type="text/javascript" src="utils/xlsx.core.min.js"></script>
<script type="text/javascript" src="utils/compressor.js"></script>
<script type="text/javascript" src="utils/ID_Validity.js"></script>
<script type="text/javascript" src="utils/utils.js"></script>
<script>
  //    * 获取日期 年-月-日 时:分:秒
//  * @returns {}
//  */
function getYMDHMSDate(oDate) {
    if (oDate != null) {
       var data = new Date(oDate);
    } else {
        var data = new Date();
    }
    let m = data.getMonth() + 1;
    let d = data.getDate();
    let H = data.getHours();
    let M = data.getMinutes();
    let S = data.getSeconds();
    if (m < 10) {
        m = "0" + m
    }
    if (d < 10) {
       d = "0" + d
    }
    if (H < 10) {
        H = "0" + H
    }
    if (M < 10) {
       M = "0" + M
    }
    if (S < 10) {
        S = "0" + S
    }
    return data.getFullYear() + "-" + m + "-" + d + " " + H + ":" + M + ":" + S}
  var a = new Vue({
    el: '#app',
    data() {
      return{
        labelPosition: 'right',
        value:'',
        options: [{}],
        yhForm: {
          id:'',
          date:'',
          name: '',
          pon: '',
          address:'',
          jd:'',
          seq:'',
          xx:'',
          zhuang:'未识别',
          yqr:'',
          yqm:'',
          delivery: false,
          type: [],
          resource: '',
          desc: '',
          value:[],
          sheng:'',
          shi:'',
          qu:'',
        },
        add:[],
      }
    },
    mounted() {
      $.ajax({
      url:'./city.json',
      type: 'get',
      success:(a) =>{       //  成功返回值     
           this.options = a
          },
          error:(err)=>{          //  失败调用，200交互成功，500服务器出问题了，304权限不够，404不存在，405 get/post请求问题
            console.log(err);
          },
    })
    },
    methods: {
      onSubmit() {
        console.log(this.value);
        this.yhForm.sheng = this.value[0]
        this.yhForm.shi = this.value[1]
        this.yhForm.qu = this.value[2]
        this.yhForm.date = getYMDHMSDate()
        this.yhForm.zhuang = '未识别'
        this.yhForm.address = this.yhForm.sheng + this.yhForm.shi + this.yhForm.qu + this.yhForm.jd + this.yhForm.seq + this.yhForm.xx
        this.add.push(this.yhForm)
        console.log(this.add,'add');
        
        $.ajax({
          headers:{
            'Content-Type':'application/x-www-form-urlencoded',
            Accesstoken:'eyJraWQiOiJteS1rZXktaWQiLCJhbGciOiJSUzI1NiJ9.eyJzdWIiOiIxNTA0NjAwNjEyMCIsImF1ZCI6ImFwaS5leGFtcGxlLmNvbSIsImlzcyI6ImF1dGguZXhhbXBsZS5jb20iLCJVc2VySW5mbyI6eyJVc2VyTmFtZSI6IjE1MDQ2MDA2MTIwIn0sImV4cCI6MTczMTE0NTg3OSwiaWF0IjoxNzMxMTQyMjc5LCJqdGkiOiI0YTZmMDYxYy1jYjQ1LTRiZDEtYjI5OS02NDEwMWRhNDRiZGIifQ.Tx2CE3ehxwKHsuIoMA48xUShjgiiLrp1mLl9Q4RX87Rp-0jJR5jfyk8Rb8TZVIiPfK4wrKhxbhKzlG9wkdjWxJL3y9BcFY7WapnelwbssuiQBBtgpxiYoH-YdlONvDr9G8wLef6UoxeQVAlM0EuLt-4n_bGqE1eBo-NAE2sZV4a36fNXLOy_aRSygZLLWalKZ5PH9hmrF6qw8KIMTZzSEzOxxHfraXkU9rD3R1JzTJPWKLS2A96Kw3LzqmJQ9c9VVRpd945t4kgjgJGytBrvkwgSEDxpSvQwrMPXIfHWOyBHGMxq098FlmW5yjec4RAdMHJL4CX71U_xweRnCJdC9w',
          },
          url: 'https://service2.ediblefungus.cn/zhaobo/generalBusiness/generalSave',
            type: 'POST',
            data:{   
            Data:JSON.stringify({"Add":{"usertable": this.add}}) ,
          },
          success:(add)=>{

          },
          error:(err)=>{          //  失败调用，200交互成功，500服务器出问题了，304权限不够，404不存在，405 get/post请求问题
            console.log(err);
          },
          dataType:'json' //转数据格式  
        })
      }
    },
})

</script>
</html>